<template>
  <div class="total">
    <ListTitle list-title="空域对象容量评估"></ListTitle>
    <div class="table-choice">
      <button @click="selectUpdown" :class="['button', { active: selectedButton === 'updown' }]">
        <span class="text_button">起降区</span>
      </button>
      <button @click="selectRoute" :class="['button', { active: selectedButton === 'route' }]">
        <span class="text_button">航路</span>
      </button>
      <button @click="selectTask" :class="['button', { active: selectedButton === 'task' }]">
        <span class="text_button">作业区域</span>
      </button>
      <div>
        <button v-if="showButton && show_if" @click=" callChildMethod()" class="button_back">返回</button>
      </div>
    </div>
    <div class="layout">
      <!-- 条件渲染：点击起降区后显示表格和选择栏 -->
      <div class="left_table">
        <div class="operation-bar">
          <span class="text_input">名称</span>
          <input type="text" class="search-input" placeholder="请输入" v-model="searchKeyword"
            style="padding-left: 1.2rem;" />
          <span class="text_input1">类型</span>
          <select v-model="order" class="dropdown-native" placeholder=" ">
            <option class="selectOption" value=null>全体类型</option>
            <option v-for="(type, index) in typeOptions" :key="index" :value="type.value" class="selectOption">{{
              type.label }}</option>
          </select>
          <el-button type="primary" icon="el-icon-search" class="el-query-button" @click="handleSearch">查询</el-button>

        </div>

        <div class="table_p">
          <TableComponent :tableData="tableData" @row="displayRowData" :name_label="name_label" :airspaceTypes="airspaceTypes" />
        </div>
      </div>
      <!-- 右侧表单 -->
      <div class="right_form">
        <FormComponent :formData="formData" :type="type" :label1="label1" :label2="label2" :label3="label3"
          :safedis="safedis" :accLabel="accLabel" :monitor_num="monitor_num" :post_ui="post_ui" @submit="submitForm"
          @reset="resetForm" @visiable_fu="receivedata" @showif_fu="handle_show" :selectedRow="selectedRow"
          :object_post="object_post" :safety_ui="safety_ui" :if_visiable="if_visiable" :show_if="show_if"
          :label1_l="label1_l" :label2_l="label2_l" :accLabel_l="accLabel_l" :monitor_num_l="monitor_num_l"
          :airspace="airspace" :airspace_l="airspace_l" />
      </div>
    </div>
  </div>
</template>

<script>
import ListTitle from "@/components/ListTitle";
import TableComponent from '@/components/Table4.vue';
import FormComponent from '@/components/Form4.vue';
import axios from 'axios';

const baseApi = process.env.NODE_ENV === 'production'
  //? process.env.VUE_APP_REMOTE_API
  ? '/api'  // 使用代理路径
  : process.env.VUE_APP_REMOTE_API_MODULE4;

export default {
  name: "Module4CapacityAssessment",
  components: {
    TableComponent,
    FormComponent,
    ListTitle
  },
  data() {
    return {
      tableData: [],
      formData: {},
      order: null,
      if_visiable: true,
      showButton: false,
      extraInputLabel: null,
      showContent: false,
      showNewInput: false,
      row: null,
      show_if: false,
      searchKeyword: '',
      selectedRow: null,
      type: '类型',
      label1: '起飞降落坪数量',
      label1_l: '个',
      label2: '进离场点高度',
      label2_l: "m",
      label3: '',
      accLabel: '导航精度误差',
      accLabel_l: 'm',
      monitor_num: '监视容量',
      monitor_num_l: '架次',
      safedis: '安全间隔',
      airspace: "",
      airspace_l: '',
      name_label: "起降区名称",
      object_post: {},
      update_ui: null,
      post_ui: `${baseApi}/takeoffland/capacityeval`,
      quiry_ui: `${baseApi}/takeoffland/search`,
      safety_ui: `${baseApi}/takeoffland/idsafeintervalall`,
      selectedButton: 'updown', // 默认高亮'起降区'按钮
      typeOptions: [
        { value: 0, label: '小型' },
        { value: 1, label: '中型' },
        { value: 2, label: '大型' }
      ], // 用于存储动态更新的类型选项
      // 以下是类型定义
      airspaceTypes: {
        updown: [
          { value: 0, label: '小型' },
          { value: 1, label: '中型' },
          { value: 2, label: '大型' }
        ],
        route: [
          { value: 0, label: '低速' },
          { value: 1, label: '中速' },
          { value: 2, label: '高速' },
          { value: 3, label: '匝道' }
        ],
        task: [
          { value: 0, label: '即时配送' },
          { value: 1, label: '科技文旅' },
          { value: 2, label: '城市治理' },
          { value: 3, label: '立体交通' },
          { value: 4, label: '边境管控' }
        ]
      }
    };
  },
  created() {
    this.fetchTableData(`${baseApi}/takeoffland/search`);
  },
  methods: {
    receivedata(isVisiable) {
      this.showButton = !isVisiable;
    },
    handle_show(isshow) {
      this.show_if = isshow;
    },
    callChildMethod() {
      this.show_if = false;
      // this.showButton=false;
    },
    async handleSearch() {

      this.keytext = this.searchKeyword;
      await this.fetchAirspaceDemand();
    },

    async fetchAirspaceDemand() {
      try {
        const params = {};
        if (this.order == 0 || this.order == 1 || this.order == 2) {
          const orderAsInt = parseInt(this.order, 10);
          if (!isNaN(orderAsInt)) {
            params.type = orderAsInt;
          }
        }

        if (this.keytext) {
          params.index = this.keytext;
        }

        console.log("查询数据", params)
        const response = await axios.get(this.quiry_ui, { params });
        this.tableData = response.data.data;
        console.log("airspaceDemand接口返回的数据", response.data.data)
      } catch (error) {
        console.error('Error fetching airspace demand:', error);
      }
    },
    async fetchTableData(api_post) {
      console.log("fetchTableData  执行")
      try {
        console.log("fetchTableData  开始执行")
        const response = await axios.get(api_post)
        console.log("fetchTableData  执行完成")
        if (response.data.code === 0) {
          this.tableData = response.data.data;
          console.log(response.data);
          console.log("fetchTableData  执行完成,done")
          console.log(response.data.data);
        }
      }
      catch (error) {
        console.error('获取数据失败', error);
      }

    },
    displayRowData(row) {
      this.selectedRow = row;
      this.object_post = row;
      this.show_if = true;
      this.showButton = false;
      this.parent_bool = true;
      console.log("选中的行", row)
    },
    selectUpdown() {
      this.selectedButton = 'updown';
      this.typeOptions = this.airspaceTypes.updown;
      this.fetchTableData(`${baseApi}/takeoffland/search`);
      this.safety_ui = `${baseApi}/takeoffland/idsafeintervalall`;
      this.update_ui = `${baseApi}/takeoffland/update`;
      this.quiry_ui = `${baseApi}/takeoffland/search`;
      this.post_ui = `${baseApi}/takeoffland/capacityeval`;
      this.type = '类型';
      this.label1 = '起飞降落坪数量';
      this.label1_l = '个';
      this.label2 = '进离场点高度';
      this.label2_l = 'm';
      this.safedis = '安全间隔';
      this.accLabel = '导航精度误差';
      this.accLabel_l = 'm';
      this.monitor_num = '监视容量';
      this.monitor_num_l = '架次';
      this.name_label = "起降区名称";
      this.if_visiable = true;
      this.show_if = false;
      this.showButton = false;
      this.airspace = null;
      this.airspace_l = null;
      this.resetForm()

    },
    selectRoute() {
      this.selectedButton = 'route';
      this.typeOptions = this.airspaceTypes.route;
      this.quiry_ui = `http://192.168.0.135:30027/airlane/search`;
      this.fetchTableData(`http://192.168.0.135:30027/airlane/search`);
      this.safety_ui = `http://192.168.0.135:30027/airlane/idsafeintervalall`;
      this.post_ui = `http://192.168.0.135:30027/capacity/assess`;
      this.type = '名称';
      this.label1 = '重复次数';
      this.label1_l = ''
      this.label2 = '仿真步长';
      this.label2_l = 's'
      this.showButton = false;
      this.show_if = false;
      this.if_visiable = true;
      this.safedis = '安全间隔';
      this.accLabel = '放行时间';
      this.accLabel_l = 'min';
      // this.monitor_num = '安全间隔裕量';
      // this.monitor_num_l = 'km';
      this.monitor_num = '';
      this.monitor_num_l = '';
      this.name_label = "航路名称";
      this.airspace = null;
      this.airspace_l = null;
      this.resetForm()
    },
    selectTask() {
      this.selectedButton = 'task';
      this.typeOptions = this.airspaceTypes.task;
      this.quiry_ui = `${baseApi}/workzone/search`;
      this.safety_ui = `${baseApi}/workzone/idsafeintervalall`;
      this.fetchTableData(`${baseApi}/workzone/search`);
      this.post_ui = `${baseApi}/workzone/capacityeval`;
      this.type = '类型';
      this.if_visiable = true;
      this.show_if = false;
      this.label1 = '作业种类';
      this.label1_l = '';
      this.label2 = '';
      this.showButton = false;
      this.label2_l = '';
      this.safedis = '安全间隔';
      this.monitor_num = '监视容量';
      this.monitor_num_l = '架次';
      this.accLabel = '导航精度误差';
      this.accLabel_l = 'm';
      this.airspace = "区域高度区间";
      this.airspace_l = 'm';
      this.name_label = "工作区名称";
      this.resetForm()
    },
    submitForm() {
      console.log('提交表单数据', this.formData);
    },
    resetForm() {
      this.formData = {
      };
    }
  }
};
</script>

<style scoped>
.title1 {
  display: flex;
  height: 3%;
  width: 100%;
  background: url(../assets/img/module4/part1/SketchPng9a3840ec9a1e44cb90b8cc0d22f86217e9bd2dd719c9cad7bfacd8322b4b85d6.png) no-repeat;
  background-size: auto 100%;
}

.image1 {
  margin-left: 1%;
  height: 85%;

}

.text_1 {
  width: 80%;
  height: 100%;
  margin-left: 1.5%;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  letter-spacing: 1px;
  font-size: 2vh;
  font-family: PangMenZhengDao-3;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
}

.image2 {
  margin-left: 10%;
  height: 100%;
}


.total {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
}

.table-choice {
  display: flex;
  /* justify-content: flex-start; */
  margin-top: 0.2rem;
  /* align-items: center; */
  height: 2.25rem;
  width: 100%;
}


.button {
  display: flex;
  height: 2.25rem;
  background: url(../assets/img/module4/part1/SketchPng672f442656b7e0f3c9863869768a199363cee97583efcf5fc791168bad3b2f9f.png) -0.125rem -0.0625rem no-repeat;
  background-size: 12.9375rem 2.5625rem;
  width: 12.5rem;
  border: none;

}

.button:hover {
  background: url(../assets/img/module4/part1/SketchPng09fb34004ea1b0e5e91ff03feafa38bcb15201eba65a4db7b12083a8412bcc68.png) -0.125rem -0.0625rem no-repeat;
  height: 2.25rem;
  background-size: 12.9375rem 2.5625rem;
  width: 12.5rem;
  border: none;
}

.button.active {
  background: url(../assets/img/module4/part1/SketchPng09fb34004ea1b0e5e91ff03feafa38bcb15201eba65a4db7b12083a8412bcc68.png) -0.125rem -0.0625rem no-repeat;
  height: 2.25rem;
  background-size: 12.9375rem 2.5625rem;
  width: 12.5rem;
  border: none;
}


.button_back {
  height: 2rem;
  border: none;
  width: 7.5rem;
  margin: 0.125rem 0 0 50.3rem;
  background-color: rgba(0, 141, 255, 1);
  color: rgba(255, 255, 255, 1);
  font-size: 0.875rem;
  font-family: AlibabaPuHuiTi_2_55_Regular;
  border-radius: 0.25rem;
}


.button_back:hover {
  background-color: rgba(0, 141, 255, 1);
  transform: scale(1.05);
}

.button_back:active {
  background-color: rgba(0, 141, 255, 1);
  transform: scale(1.05);
}



.text_button {
  width: 3rem;
  height: 1.5625rem;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 1rem;
  font-family: AlibabaPuHuiTi_2_75_SemiBold;
  text-align: center;
  white-space: nowrap;
  line-height: 1.5625rem;
  margin: 0.1875rem 0 0 4.15rem;
}

.layout {
  display: flex;
  align-items: stretch;
  /* 使左边表格和右边表单在纵向上对齐 */
  width: 100%;
  height: 85%;
  margin-top: 0.8125rem;
}

.left_table {
  width: 27%;
  height: 100%;
}

.operation-bar {
  display: flex;
  /* align-items: center; */
  width: 100%;
  height: 2rem;
}

.dropdown-native {
  width: 6.25rem;
  height: 2rem;
  background: url("../assets/img/module4/part1/table3.png") 100% no-repeat;
  border: none;
  color: rgba(255, 255, 255, 1);
  background-size: 100% 100%;
  margin-left: 0.625rem;
}

.dropdown-native::placeholder {
  color: white !important;
}

.native-action-button img {
  width: 100%;
  height: auto;
}


.selectOption {
  color: #000000;

}

.search-wrapper {
  width: 40%;
  /* margin-top: 1%; */
  margin-right: 1vw;
}

.search-input::placeholder {
  width: 2.625rem;
  height: 1.25rem;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 0.875rem;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 1.25rem;
  margin: 0.375rem 0 0 0.875rem;
}

.search-input {
  height: 2rem;
  background: url("../assets/img/module4/part1/table3.png") 100% no-repeat;
  border: none;
  color: rgba(255, 255, 255, 1);
  font-size: 0.875rem;
  font-weight: NaN;
  background-size: 100% 100%;
  margin-left: 0.625rem;
  width: 7.875rem;
}

.el-query-button {
  height: 2rem;
  width: 4.5rem;
  margin-left: 1.5rem;
  display: flex;
  justify-content: center;
  /* 水平居中内容 */
  align-items: center;
  /* 垂直居中内容 */
  font-size: 1.5vh;
}


.table_p {
  width: 100%;
  height: 96%;
  overflow: auto;
}

.right_form {
  display: flex;
  width: 70%;
  height: 99%;
  margin-left: 1%;
}

.text_input {
  width: 1.75rem;
  height: 1.25rem;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 0.875rem;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 1.25rem;
  margin-top: 0.255rem;
  font-family: AlibabaPuHuiTi_2_55_Regular;
}

.text_input1 {
  width: 1.75rem;
  height: 1.25rem;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 0.875rem;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 1.25rem;
  margin-top: 0.255rem;
  margin: 0.375rem 0 0 1.5rem;
  font-family: AlibabaPuHuiTi_2_55_Regular;

}
</style>